{include file="public/header"}
<style scoped>
    .el-select-dropdown {
      padding: 0;
    }
    .dialog-footer{
        margin-top: 20px;
    }
    </style>
 {include file="public/style"}
    
          <el-card  shadow="never"  >   
            <el-tabs v-model="activeName" type="border-card"   @tab-click="handleClick" >
                <el-tab-pane  label="添加采购单"  name="addpurchase"></el-tab-pane>
                <el-tab-pane  label="批量导入采购单"  name="excelpurchase">
                    <el-card shadow="never">
                        <el-form :model="searchForm"  ref="refsearchForm" label-width="200px" class="demo-ruleForm">
                            <el-form-item label="导入excel文件上传" prop="buyer_id">
                               <el-upload
                                    class="upload-demo" drag    :on-exceed="onExceed"  class="upload-demo"   drag  :on-success="handleAvatarSuccess"action="/Admin/Purchase/import_purchase"
                :limit="20" :file-list="fileList_show" multiple>
                                    <i class="el-icon-upload"></i>
                                    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>                                 
                                </el-upload>
                                <div ><span style="margin-top: 100px;">上传前可以先</span>   <el-link href="/uploads/file/采购单模板.xlc" type="primary" download="下载模板.csv">下载模板</el-link></div>  
                            </el-form-item>                   
                     
                            <el-form-item>
                            <el-button type="primary" @click="submitForm()"  class="dialog-footer">提交</el-button>                     
                           </el-form-item>
                        </el-form>
                    </el-card>   
                </el-tab-pane>
            </el-tabs>         
        </el-card>
    </div>      


    <script>
        new Vue({
            el: '#app',
            data: function () {
                return { 
                    fileList_show:[],
                    activeName: 'excelpurchase',                    
                    searchForm:{                                    
                        data:[],        
                       
                    },     
                 }                   
                   
                
            },
            mounted(){                         
            },
            methods: { 
                //点击tab切换
               handleClick(tab, event) {
                    window.location.href = '/admin/purchase/addpurchase';                    
                },
                onExceed(){
                    this.$message.error('最多只能上传21个文件');
                },
                handleAvatarSuccess(res, file,fileList) {                  
                     this.searchForm.data=res.info           
                },
                 //点击提交采购
                async submitForm() {   
        
                    if (this.searchForm.data.length === 0){
                        return this.$message.error('请先上传文件！');
                    }                            
                    const res = await axios.post('/Admin/Purchase/import_purchase',{params:this.searchForm})
                    if (res.status !== 1) return this.$message.error(res.info);
                    this.$message.success('添加成功')                        
                },
                
               
            }
        })
     </script>
</body>    
 </html>
      